<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加卡密</title>
    <link rel="stylesheet" href="public/layui/css/layui.css">
    <style>
        body {
            padding: 15px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            min-height: 100vh;
        }

        .form-container {
            width: 100%;
            max-width: 450px;
        }

        @media screen and (max-width: 768px) {
            .layui-form-item .layui-input-inline {
                width: 100% !important;
                margin: 0 !important;
            }

            .duration-wrapper {
                display: flex;
                gap: 10px;
            }

            .duration-wrapper .layui-input-inline {
                flex: 1;
                margin-right: 0 !important;
            }

            .duration-wrapper select {
                width: 100% !important;
                flex: 1;
            }

            .vip-duration-group {
                display: flex !important;
                gap: 10px;
            }

            .vip-duration-group > div {
                flex: 1;
            }

            .vip-duration-group .layui-input,
            .vip-duration-group select {
                width: 100% !important;
            }
        }
    </style>
</head>

<body>
    <div class="form-container">
        <form class="layui-form layui-form-pane layui-padding-3" lay-filter="edit" action="">
            <!-- 卡密类型 -->
            <div class="layui-form-item">
                <label class="layui-form-label">卡密类型</label>
                <div class="layui-input-inline">
                    <select name="type" lay-verify="required">
                        <option value="">请选择卡密类型</option>
                        <option value="2">会员卡密</option>
                        <option value="3">积分卡密</option>
                    </select>
                </div>
            </div>

            <!-- 生成数量 -->
            <div class="layui-form-item">
                <label class="layui-form-label">生成数量</label>
                <div class="layui-input-inline">
                    <input type="number" lay-verify="required" lay-affix="number" name="num" 
                           placeholder="生成数量" step="10" min="0" class="layui-input">
                </div>
            </div>

            <!-- 积分 -->
            <div class="layui-form-item">
                <label class="layui-form-label">积分</label>
                <div class="layui-input-inline">
                    <input type="number" lay-verify="required" lay-affix="number" name="score" 
                           placeholder="积分" step="10" min="0" class="layui-input" value="0">
                </div>
            </div>

            <!-- 会员时长 -->
            <div class="layui-form-item">
                <label class="layui-form-label">会员时长</label>
                <div class="layui-input-inline">
                    <div class="vip-duration-group">
                        <div>
                            <input type="number" lay-affix="number" name="vip_count" 
                                   placeholder="时长" step="1" min="0" class="layui-input" value="1">
                        </div>
                        <div>
                            <select name="vip_type">
                                <option value="">单位</option>
                                <option value="1" selected>天</option>
                                <option value="2">月</option>
                                <option value="3">年</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 提交按钮 -->
            <div class="layui-form-item">
                <button class="layui-btn" lay-submit lay-filter="add">添加</button>
            </div>
        </form>
    </div>

    <script src="./public/layui/layui.js"></script>
    <script>
        layui.use(function () {
            var form = layui.form;
            var $ = layui.$;
            
            form.on('submit(add)', function (data) {
                var field = data.field;
                $.post('?p=index&c=fake&a=doAdd', field, function(res) {
                    if (res.code == 200) {
                        layer.msg('添加成功');
                    } else {
                        layer.msg(res.msg);
                    }
                });
                return false;
            });

            // 确保表单渲染完成
            form.render();
        });
    </script>
</body>

</html>